{% extends 'base.html.twig' %}

{% set meta = {
    title: 'UX Toolkit - Kits - ' ~ kit.manifest.name,
    description: kit.manifest.description,
    canonical: url('app_icons'),
    social: {
        title: 'UX Toolkit - Kits - ' ~ kit.manifest.name,
        description: kit.manifest.description,
        image: {
            url: absolute_url(asset(package.getSocialImage('1200x675'))),
            type: 'image/png',
            width: 1200,
            height: 675,
            alt: package.humanName ~ ' - Kit ' ~ kit.manifest.name,
        },
    }
} %}

{% block content %}
    <div class="hero"></div>

    <div class="container-fluid container-xl pt-4" style="display: grid; grid-template-columns: 180px 1fr; gap: 2rem">
        {{ include('toolkit/_kit_aside.html.twig') }}

        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ path('app_toolkit') }}">UX Toolkit</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('app_toolkit', {'_fragment': 'kits'}) }}">Kits</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ kit.manifest.name }}</li>
                </ol>
            </nav>

            <div class="Wysiwyg">
                {{- kit.installAsMarkdown|markdown_to_html -}}
            </div>
        </div>
    </div>
{% endblock %}
